/**
 * 微任务队列进入和执行过程演示
 * 
 * 微任务队列（Microtask Queue）是JavaScript事件循环中的重要机制
 * 主要用于处理Promise回调、queueMicrotask、MutationObserver等
 * 
 * 微任务队列特点：
 * 1. 在当前同步代码执行完毕后立即执行
 * 2. 微任务队列会一次性全部执行完毕，直到队列为空
 * 3. 如果在微任务执行过程中又产生了新的微任务，这些新的微任务会被添加到队列末尾
 * 4. 微任务优先于宏任务（如setTimeout）执行
 */

// === 第一个Promise链 ===
Promise.resolve()
  .then(() => {
    // 微任务1：第一个Promise链的第一个then回调
    // 此时微任务队列：[微任务1, 微任务3]
    console.log(0); // 输出: 0
    
    // 返回一个新的Promise，这会影响到微任务队列的后续行为
    // 当then回调返回Promise时，需要等待该Promise解析
    // 这会在当前微任务执行后创建一个新的微任务来处理解析结果
    return Promise.resolve(4); // 创建一个待解析的Promise
  })
  .then((res) => {
    // 微任务6：等待前一个Promise解析后执行
    // 此时微任务队列：[微任务6]
    console.log(res); // 输出: 4
  });

// === 第二个Promise链 ===
Promise.resolve()
  .then(() => {
    // 微任务2：第二个Promise链的第一个then回调
    // 此时微任务队列：[微任务1, 微任务2]
    console.log(1); // 输出: 1
    
    // 这个then回调没有显式返回值，默认返回undefined
    // 所以下一个then会立即被加入微任务队列
  })
  .then(() => {
    // 微任务4：第二个Promise链的第二个then回调
    // 此时微任务队列：[微任务4]
    console.log(2); // 输出: 2
  })
  .then(() => {
    // 微任务5：第二个Promise链的第三个then回调
    // 此时微任务队列：[微任务5]
    console.log(3); // 输出: 3
  })
  .then(() => {
    // 微任务7：第二个Promise链的第四个then回调
    // 此时微任务队列：[微任务7]
    console.log(5); // 输出: 5
  });

/**
 * 执行过程详细分析（修正版）：
 * 
 * 同步代码执行阶段：
 * - 创建两个Promise.resolve()实例
 * - 将各自的then回调加入微任务队列
 * 
 * 微任务队列执行阶段：
 * 1. 初始微任务队列：[第一个Promise的then, 第二个Promise的then]
 *    - 队列：[输出0的回调, 输出1的回调]
 * 
 * 2. 执行第一个微任务（输出0的回调）：
 *    - 输出：0
 *    - 返回Promise.resolve(4)，这会创建两个额外的微任务：
 *        a. 微任务A：处理Promise.resolve(4)的解析
 *        b. 微任务B：在解析完成后执行后续then
 *    - 当前队列：[输出1的回调, 微任务A]
 * 
 * 3. 执行第二个微任务（输出1的回调）：
 *    - 输出：1
 *    - 默认返回undefined，所以下一个then（输出2）被加入队列
 *    - 当前队列：[微任务A, 输出2的回调]
 * 
 * 4. 执行微任务A（处理Promise解析）：
 *    - 解析Promise.resolve(4)得到值4
 *    - 创建微任务B（执行第一个Promise链的第二个then）
 *    - 当前队列：[输出2的回调, 微任务B]
 * 
 * 5. 执行输出2的回调：
 *    - 输出：2
 *    - 默认返回undefined，所以下一个then（输出3）被加入队列
 *    - 当前队列：[微任务B, 输出3的回调]
 * 
 * 6. 执行微任务B（输出4的回调）：
 *    - 输出：4
 *    - 当前队列：[输出3的回调]
 * 
 * 7. 执行输出3的回调：
 *    - 输出：3
 *    - 默认返回undefined，所以下一个then（输出5）被加入队列
 *    - 当前队列：[输出5的回调]
 * 
 * 8. 执行输出5的回调：
 *    - 输出：5
 *    - 微任务队列清空
 * 
 * 最终输出顺序：0, 1, 2, 3, 4, 5
 * 
 * 关键点说明：
 * - 当then回调返回Promise时，会创建两个额外的微任务来处理Promise解析
 * - 微任务队列遵循先进先出(FIFO)原则
 * - 每个微任务执行完毕后，如果产生新的微任务，会添加到队列末尾
 * - 微任务队列会一次性执行完毕，直到队列为空
 * - 返回Promise.resolve()会产生额外的微任务延迟，这解释了为什么4在3之后输出
 */
